<template>
	<a-drawer
		:width="500"
		:title="title"
		:visible="visible"
		@close="onClose">
		<div class="drawer-content-box member-upload-box">
			<a-form-model :model="memberEntity" :rules="rules" ref="memberEntity" layout="vertical">
				<a-form-model-item label="会员标题" prop="memberTitle">
					<a-input v-model:value="memberEntity.memberTitle" placeholder="请输入会员标题"/>
				</a-form-model-item>
				<a-form-model-item label="会员折扣" prop="discount">
					<a-input v-model:value="memberEntity.discount" placeholder="请输入会员折扣"/>
				</a-form-model-item>
				<template>
					<a-upload
						action="#"
						list-type="picture-card"
						v-model:file-list="fileList"
						:before-upload="beforeUpload"
						@preview="handlePreview"
						:remove="deleteImg">
						<div v-if="fileList.length < 1">
							<a-icon type="cloud" :style="{fontSize: '30px'}" />
							<div class="ant-upload-text">上传封面</div>
						</div>
					</a-upload>
					<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
						<img alt="example" style="width: 100%" :src="previewImage"/>
					</a-modal>
				</template>
			</a-form-model>
		</div>
		<div class="drawer-footer-box">
			<a-button type="primary" @click="saveRules('rulesEntity')">保存</a-button>
		</div>
	</a-drawer>
</template>

<script>
import {api, post, uploadFile} from "@/api/api";

export default {
	name: "AddMember",
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			id: '',
			visible: false,
			memberEntity: {},
			fileList: [],
			previewVisible: false,
			previewImage: '', // 放大显示的图片地址
			rules: {
				memberTitle: [
					{required: true, message: "会员标题不能为空", trigger: "blur",},
				],
				discount: [
					{required: true, message: "会员折扣不能为空", trigger: "blur",},
				]
			},
		}
	},
	methods: {
		show(id){
			if ( id ) {
				this.id = id
				// 编辑
				post(api.RulesSingle, {id: id}).then(res=>{
					this.rulesEntity = res.data.data
				})
			}
			this.visible = true
			post(api.GetStationList, {}).then(res=>{
				this.stationEntities = res.data.data
			})
		},
		// 上传封面图片前置钩子
		beforeUpload(file) {
			const suffix = file.name.replace(/.+\./, '')//取得文件的后缀名
			if (file.size > 4194304) {//限制文件的大小 4MB
				this.$message.error('上传文件不得大于4MB')
				return false
			} else if ((suffix != 'jpg') && (suffix != 'png') && (suffix != 'jpeg') && (suffix != 'gif')) { //判断文件是否是图片格式
				this.$message.error('上传文件格式不正确')
				return false
			}
			this.fileList.push(file)
			// 上传
			uploadFile(api.UploadMemberImg, {multipartFile: this.fileList[0]}).then(res=>{
				this.memberEntity.bgImg = res.data.data
			})
			return false
		},
		// 大屏显示图片
		handlePreview(file) {
			this.previewImage = file.thumbUrl
			this.previewVisible = true;
		},
		deleteImg(e) {
			this.fileList = []
		},
		handleCancel(e){
			this.previewImage = ''
			this.previewVisible = false
		},
		// 保存会员记录
		saveRules() {
			this.$refs.memberEntity.validate ( ( valid ) => {
				if ( valid ) {
					if ( this.fileList.length <= 0 ) {
						this.$message.error('会员详情图片不能为空')
						return
					}
					post ( api.SaveMember, this.memberEntity ).then ( ( res ) => {
						if ( res.data.code == "000000" ) {
							this.$message.success ( {
								content: `添加会员记录成功`,
							} );
							this.onClose()
							this.$emit('reloadList')
						} else {
							this.$message.error ( {
								content: res.message,
							} );
						}
					} ).catch ( ( err ) => {
						console.log ( err );
					} );
				} else {
					return this.$message.warning ( {
						content: "请填写完整信息",
					} );
				}
			} );
		},
		onClose() {
			this.$refs.memberEntity.resetFields ();
			this.visible = false
		},
	},
}
</script>

<style lang="less" scoped>
	@import '../../../static/addMember';
</style>
